<script setup lang="ts">
import { ref, computed } from 'vue'
import { NCard,NTag} from 'naive-ui'
import { showMsg } from '@/assets/utils/tools'
import { useRouter } from 'vue-router';
import {useMenuRecordStore} from '@/stores/menuRecord'
import svgIcon from '@/components/base-svgIcon/index.vue';
const router = useRouter()
const menuRecord = useMenuRecordStore()
const height = window.innerHeight - 231.8 
// 参数
const props = withDefaults(defineProps<{
    //标题
    title?: string;
    bordered?:boolean;
    icon?:string
    headShow?:boolean
    // 表头部数据
    // columns: any[];
    // // 表数据
    // data: any[];
    // //分页
    // pagination?: Object;
    // //表格内容的最大高度
    // maxHeight?: number | string;
    // //表格内容的最大高度
    // bordered?: boolean;
    // //斑马线条纹
    // striped?: boolean;

    // 主题：default默认主题 dark深色主题
    // theme?: "default" | "dark";
}>(), {
    
    bordered: true,
    headShow:false
});


const emit = defineEmits<{
    // 关闭事件
    (e: "closed"): void;
}>();

function narrowClick() {
    router.replace('/')
    
    
    let currentRoute = router.currentRoute.value
    console.log('currentRoutecurrentRoutecurrentRoute',currentRoute);

    let val = currentRoute
    let bol =  menuRecord.menuList.includes(val)
    if (bol) {
        
    } else {
        menuRecord.addMenu(currentRoute)
    } 
}

function handleClose() {
    router.replace('/')
    let currentRoute = router.currentRoute.value
    menuRecord.delMenu(currentRoute.fullPath)
}

</script>
<template>
    <n-card  :bordered="bordered" style="height: 100%;overflow: hidden;" closable  @close="handleClose">
        <template #header>
            <slot v-if="headShow" name="headers"></slot>
            <div v-else >
                <svgIcon :icon-name="icon" size="subSmall"></svgIcon>
                <span>{{ title }}</span> 
                <div style="display: inline-flex;justify-content: center; height: 100%; width: 90%;position: relative;top: 0;  left: 50%;transform: translateX(-50%);">
                    <slot name="headers"></slot>
                </div>
            </div>
        </template>
        <template #header-extra>
            <n-tag size="small" checkable @click="narrowClick">
                 一 
             </n-tag>
        </template>
        <div class="slotBox" :style="{height:height +'px'}">
            <slot></slot> 
        </div>
        
        <template #footer>
        <slot name="footers"></slot>
        </template>
        <template #action>
        <slot name="actions"></slot>
        </template>
    </n-card>
</template>
<style src="./index.scss"></style>